<template>
  <div class="page">
    <div class="page-brand">关键词管理</div>
    <div class="g-card mt">
      <div class="flex-b align-center ">
        <el-button type="primary">创建关键词</el-button>
        <div class="flex-e align-center">
          <el-button type="danger">删除关键词</el-button>
          <el-button type="primary">导出报表</el-button>
        </div>
      </div>
      <div class="table-box mt">
        <el-table
          ref="mainTable"
          :data="tableData"
          tooltip-effect="light"
          style="width: 100%"
          size="mini"
          header-row-class-name="mao-table-head"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" label="序号" width="55" />
          <el-table-column prop="avatar" label="任务名" />
          <el-table-column prop="name" label="创建时间" />
          <el-table-column prop="platform" label="审核状态" />
          <el-table-column prop="platform" label="任务状态" />
          <el-table-column prop="todo" label="操作" />
        </el-table>
        <div class="flex-e mt">
          <el-pagination
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [],
      page: 1,
      total: 3,
      pageSize: 5
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedList = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.mt {
  margin-top: 20px;
}
</style>
